<template>
  <div v-if="node" class="binary-search-tree-item-wrapper">
    <!-- 实际渲染的节点 -->
    <div class="binary-search-tree-item-root-wrapper">
      <!-- 根节点 -->
      <transition mode="out-in">
        <div
          v-if="node.key"
          class="binary-search-tree-item v-shadow v-flex"
          :class="{ 'bst-pass-node': hasNodePass }"
          v-ripple
          @click="nodeClick(node.key)"
        >
          {{ node.key }}
        </div>
      </transition>

      <!-- 两条边 -->
      <div class="binary-search-tree-line-wrapper">
        <transition mode="out-in">
          <binary-search-tree-line
            v-if="node.left"
            :node="node.left"
            class="binary-search-tree-line-left"
          ></binary-search-tree-line>
        </transition>

        <transition mode="out-in">
          <binary-search-tree-line
            v-if="node.right"
            :node="node.right"
            class="binary-search-tree-line-right"
          ></binary-search-tree-line>
        </transition>
      </div>
    </div>

    <!-- 左节点 -->
    <transition mode="out-in">
      <binary-search-tree-item
        v-if="node.left"
        class="binary-search-tree-item-left"
        type="left"
        :ref="receiveNodeLeft"
        :node="node.left"
        :pass-node="passNode"
      ></binary-search-tree-item>
    </transition>

    <!-- 右节点 -->
    <transition mode="out-in">
      <binary-search-tree-item
        v-if="node.right"
        class="binary-search-tree-item-right"
        type="right"
        :ref="receiveNodeRight"
        :node="node.right"
        :pass-node="passNode"
      ></binary-search-tree-item>
    </transition>
  </div>
</template>

<script lang="ts">
import Button from "@/components/Button.vue";
import BinarySearchTreeLine from "@/components/tree/BinarySearchTreeLine.vue";
import { defineComponent, PropType, inject, nextTick, onMounted } from "vue";
import { useBSTItem } from "@/use/UseBSTItem.ts";
import { INode } from "@/interface";
import { IMessage } from "@/interface/IUse";
import { baseConfig, initConfig } from "@/config";

export default defineComponent({
  name: "BinarySearchTreeItem",
  components: {
    BinarySearchTreeLine,
    "v-btn": Button,
  },
  props: {
    node: Object as PropType<INode>,
    passNode: {
      type: [String, Number],
      default: -1,
    },
    root: Boolean,
    type: String
  },
  setup(props, content) {
    const $tree = inject("tree", null);
    const $message: IMessage = inject("message") as IMessage;
    
    const use = useBSTItem(props, content, { $tree, $message });
    const lineHeight = baseConfig.levelInterval - initConfig.nodeWidth;
    // 初始化根节点
    onMounted(() => nextTick(() => props.root && use.initRoot(props.node as INode)));

    return {
      lineHeight,
      initConfig,
      ...use
    };
  }
});
</script>

<style scoped>
@import "../../styles/bstItem.css";
.binary-search-tree-line-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
.binary-search-tree-item {
  width: v-bind("initConfig.nodeWidth + 'px'");
  height: v-bind("initConfig.nodeWidth + 'px'");
}
.binary-search-tree-line-left,
.binary-search-tree-line-right {
  position: absolute;
  top: 22.5px;
}
</style>
